<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{margin: 0;padding: 0;}
        .banner{
            width: 600px;
            height: 400px;
            border: 10px solid #000;
            margin: 100px auto;
            position: relative;
        }
        .imgBox li{
            width: 600px;
            height: 400px;
            list-style-type: none;
            position: absolute;
            left: 0;
            top: 0;
            text-align: center;
            line-height: 400px;
            color: #fff;
            font-size: 100px;
            opacity: 0;
            transition: all 1s;
        }
        .imgBox li.active{
            opacity: 1;
        }
        .pointBox{
            position: absolute;
            left: 50%;
            transform: translateX(-50%);
            bottom: 30px;
        }
        .pointBox li{
            list-style: none;
            width: 10px;
            height: 10px;
            background-color: #fff;
            border-radius:50% ;
            float: left;
            margin-right: 10px;
        }
        .pointBox li.active{
            background-color: #666;
        }
        .left,.right{
            width: 80px;
            height: 100px;
            text-align: center;
            line-height: 100px;
            font-size: 50px;
            background-color: rgba(0,0,0,.5);
            position: absolute;
            color: #fff;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .right{
            right: 0;
        }
    </style>
</head>
<body>
    <div class="banner">
        <!-- 图片列表 -->
        <ul class="imgBox">
            <li class="active" style="background-color: red;">1</li>
            <li style="background-color: blue;">2</li>
            <li style="background-color: yellow;">3</li>
            <li style="background-color:orange ;">4</li>
            <li style="background-color: pink;">5</li>
        </ul>
        <!-- 指示灯 -->
        <ol class="pointBox">
            <!-- <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li> -->
        </ol>
        <!-- 左右箭头 -->
        <div>
            <p class="left"><</p>
            <p class="right">></p>
        </div>
    </div>
    <script>
        class fadeBanner{
            constructor(ele){
                this.banner=document.querySelector(ele)//banner 盒子
                this.pointBox=this.banner.querySelector('.pointBox')//指示灯盒子
                this.imgBox=this.banner.querySelector('.imgBox')//图片列表

                this.length=this.imgBox.children.length//图片的个数  5
                this.index=0
                this.timer=null//初始化定时器

                this.init()
            }
            init(){
                //
                this.setPoint()//动态生成指示灯
                this.bindEvent()//调用绑定事件，实现点击左右箭头或者点击指示灯的操作
                this.autoPlay()//自动轮播
                this.overOut()//鼠标移入移出，开启或者禁止轮播
            }
            setPoint(){
                //生成指示灯，根据图片的个数，动态生成指示灯
                let frg=document.createDocumentFragment()//创建文档碎片
                ;[].forEach.call(this.imgBox.children,(item,index)=>{
                    //循环遍历所有的图片
                    let li=document.createElement('li')
                    li.dataset.index=index
                    if(index===0){
                        li.classList.add('active')
                    }
                    frg.appendChild(li)
                })
                this.pointBox.appendChild(frg)
            }
            bindEvent(){
                this.banner.addEventListener('click',e=>{
                    e = e || window.event 
                    let target=e.target || e.srcElement
                   console.log(target)
                   if(target.className==='left'){
                    // alert('left')
                     this.slideLeft()
                   }else if(target.className==='right'){
                    // alert('right')
                        this.slideRight()
                   }else if(target.parentElement.nodeName==='OL'){
                    // alert('ol-li')
                        this.index=parseInt(target.dataset.index)
                        this.move()
                   }
                })
            }
            slideRight(){
                //向右切换轮播:1-2 this.index
                this.index++
                console.log(this.index)
                if(this.index >= this.length){
                    this.index=0
                }
                this.move()
            }
            slideLeft(){
                this.index--
                console.log(this.index)
                if(this.index<0){
                    this.index=this.length-1
                }
                this.move()
            }
            move(){
                //切换轮播的共用方法--例如从第一张图切换到第二张图
                ;[].forEach.call(this.imgBox.children,(item,index)=>{
                    item.classList.remove('active')
                })
                this.imgBox.children[this.index].classList.add('active')
                this.changePoint()
            }
            changePoint(){
                //对应的指示灯点亮
                ;[...this.pointBox.children].forEach((olLi)=>{
                    olLi.classList.remove('active')
                })
                this.pointBox.children[this.index].classList.add('active')
            }
            autoPlay(){
                //自动轮播开启
                this.timer=setInterval(()=>{
                    this.slideRight()
                },2000)
            }
            overOut(){
                this.banner.addEventListener('mouseover',()=>clearInterval(this.timer))
                this.banner.addEventListener('mouseout',()=>this.autoPlay())
            }
        }

        let banner1=new fadeBanner('.banner')
    </script>
</body>
</html>